<template>
	<view>
		<!-- 商品模块 -->
		<view class="seller-view">
			<view class="seller-info u-flex u-row-between">
				<view class="seller-name">
					<view class="name">xxx商品</view>
					<view class="status">已完成</view>
				</view>
				<view class="order-sn"></view>
			</view>
			<u-line color="#DCDFE6"></u-line>
			<view class="goods-item-view" v-for="(sku, index) in 2" :key="index">
				<view class="goods-img">
					<u-image border-radius="6" width="131rpx" height="131rpx"
						src="https://lilishop-oss.oss-cn-beijing.aliyuncs.com/0f423fb60f084b2caade164fae25a9a0.png">
					</u-image>
				</view>
				<view class="goods-info">
					<view class="goods-title u-line-2">商品名字</view>
					<view class="goods-price">
						￥12
					</view>
				</view>
				<view class="goods-num">
					<view>x2</view>
				</view>
			</view>
		</view>

		<!-- 投诉主题 -->
		<u-select @confirm="confirmComplain" v-model="complainShow" :list="complainList"></u-select>
		<!-- 投诉模块 -->
		<view class="cell">
			<view class="cell-item between" @click="complainShow = true">
				<view class="cell-title"> 投诉主题 </view>
				<view class="cell-view"> {{ complainTopic }} </view>
				<u-icon style="margin-left: 20rpx" name="arrow-down"></u-icon>
			</view>

			<view class="cell-item complain-content">
				<view class="cell-title title"> 投诉内容 </view>
				<view class="cell-view content">
					<u-input type="textarea" height="70rpx" auto-height v-model="complainValue" />
				</view>
			</view>
			<view class="cell-item">
				<view class="cell-title"> 投诉凭证 </view>
				<view class="cell-view">
					<u-upload ref="uUpload" :header=" { accessToken: 'xxx' }" :action="action"
						width="200" @on-uploaded="onUploaded" :max-count="5">
					</u-upload>
				</view>
			</view>
		</view>

		<view class="submit-btn" @click="handleSubmit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'xxx', //上传图片地址
				complainValue: "", //投诉内容
				complainShow: false, //投诉主题开关
				complainTopic: "", //投诉抱怨话题
				complainList: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				], // 投诉列表
			};
		},

		onLoad(option) {
		
		},

		methods: {
			/**
			 * 上传完成
			 */
			onUploaded(lists) {
			
			},
			/**
			 * 提交
			 */
			handleSubmit() {
				uni.redirectTo({
					url: "/pages/order/complain/complainList",
				});
			},

			/**
			 * 确认投诉
			 */
			confirmComplain(e) {
				this.complainTopic = e[0].label;
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import "../goods.scss";

	.cell {
		width: 100%;
		background: #fff;
		padding: 26rpx;
	}

	.cell-item {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #f5f7fa;
		display: flex;
		align-items: center;
	}

	.complain-content {
		display: flex;
		align-items: center;

		.content {
			width: 100%;
		}

		.title {
			width: 140rpx;
		}
	}

	/deep/ .u-input__textarea {
		padding: 0;
	}

	.cell-title {
		font-weight: bold;
		margin-right: 20rpx;
	}

	.submit-btn {
		width: 70%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		background: $light-color;
		margin-top: 20px;
		border-radius: 200px;
	}
</style>
